<template>
  <el-container class="admin-box">
    <el-aside width="200px">
      <div class="logo"></div>
      <!-- 菜单 -->
      <el-menu :default-active="menuActive" router>
        <el-submenu v-for="item in menuList" :key="item.id" :index="item.id + ''">
          <template slot="title">
            <i :class="[item.icon]"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item v-for="val in item.children" :key="val.id" :index="val.route">
            {{ val.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div></div>
        <div>
          <div>{{ realname }}</div>
          <div @click="userLogout">退出登录</div>
        </div>
      </el-header>
      <el-main>
        <!-- 面包屑导航  数据如何变,数据写入到路由元信息中，通过watch来监听变化就可以 -->
        <el-breadcrumb class="breadcrumb" separator="/">
          <template v-for="(item, index) in breadcrumbs">
            <el-breadcrumb-item :key="index" :to="{ path: item.to }">
              {{ item.name }}
            </el-breadcrumb-item>
          </template>
        </el-breadcrumb>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import menuList from '@/config/menu'
import { getMenusApi } from '@/api/userApi'
export default {
  data() {
    return {
      breadcrumbs: []
      // menuList: []
    }
  },
  // async created() {
  //   // 获取当前登录用户的角色id
  //   // const roleid = this.$store.getters.roleid
  //   // let ret = await getMenusApi(roleid)
  //   // this.menuList = ret.data
  // },
  created() {
    this.$store.dispatch('user/fetchMenusAction', this.$store.getters.roleid)
  },
  computed: {
    realname() {
      return this.$store.getters.name || '无'
    },
    menuList() {
      // return menuList
      return this.$store.state.user.menus
    },
    // 刷新默认展开的菜单的选项
    menuActive() {
      return this.$route.path
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler(value) {
        this.breadcrumbs = this.$route.meta.breadcrumb || []
      }
    }
  },
  methods: {
    async userLogout() {
      // 先确认一下，然后才能进行退出
      try {
        await this.$confirm('您真的要退出本次登录吗?', '退出提示', {
          confirmButtonText: '确认退出',
          cancelButtonText: '考虑一下',
          type: 'warning'
        })
        // 清空当前存储的登录状态
        this.$store.commit('user/logout')
        // 跳转到登录页面
        // 1.使用前端路由跳转，页面不刷新，但是如果有数据需要清空但你没有手动清，可能还会存在
        // 2.刷新跳转到登录页，自动清空内存中存储的数据
        window.location.href = '/login'
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  background: #fff;
  padding: 10px;
}

.admin-box {
  min-height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  > div:last-child {
    width: 200px;
    display: flex;
    > div {
      font-weight: bold;
      margin-left: 20px;
      &:last-child {
        cursor: pointer;
      }
    }
  }
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  .logo {
    width: 95%;
    height: 60px;
    border-radius: 5px;
    margin: 0 auto;
    background: #b3c0d1;
  }
}

.el-main {
  background-color: #e6e6e6;
  color: #333;
  padding: 5px;
}
</style>
